<template>
	<view class="coupon-container">
		
		<!-- 标签页 -->
		<view class="tab-bar">
			<view class="tab-item" :class="{ active: activeTab === 'available' }" @click="switchTab('available')">
				<text class="tab-text">可用优惠券</text>
			</view>
			<view class="tab-item" :class="{ active: activeTab === 'unavailable' }" @click="switchTab('unavailable')">
				<text class="tab-text">不可用优惠券</text>
			</view>
		</view>
		
		<!-- 内容区域 -->
		<view class="content-area">
			<!-- 可用优惠券 -->
			<view v-if="activeTab === 'available'" class="tab-content">
				<view class="coupon-list" v-if="availableCoupons.length > 0">
					<view class="coupon-item" v-for="(item, index) in availableCoupons" :key="item.id" @click="selectCoupon(item)">
						<view class="coupon-left">
							<view class="coupon-amount">
								<text class="amount-symbol">¥</text>
								<text class="amount-value">{{ item.amount }}</text>
							</view>
							<view class="coupon-condition">满{{ item.condition }}可用</view>
						</view>
						<view class="coupon-right">
							<view class="coupon-title">{{ item.title }}</view>
							<view class="coupon-desc">{{ item.description }}</view>
							<view class="coupon-date">{{ item.validDate }}</view>
						</view>
						<view class="coupon-checkbox" :class="{ checked: item.selected }">
							<text class="check-icon" v-if="item.selected">✓</text>
						</view>
					</view>
				</view>
				<view class="empty-state" v-else>
					<view class="empty-icon">💰</view>
					<view class="empty-text">暂无优惠券</view>
				</view>
			</view>
			
			<!-- 不可用优惠券 -->
			<view v-if="activeTab === 'unavailable'" class="tab-content">
				<view class="coupon-list">
					<view class="coupon-item disabled" v-for="(item, index) in unavailableCoupons" :key="item.id">
						<view class="coupon-left">
							<view class="coupon-amount">
								<text class="amount-symbol">¥</text>
								<text class="amount-value">{{ item.amount }}</text>
							</view>
							<view class="coupon-condition">满{{ item.condition }}可用</view>
						</view>
						<view class="coupon-right">
							<view class="coupon-title">{{ item.title }}</view>
							<view class="coupon-desc">{{ item.description }}</view>
							<view class="coupon-date">{{ item.validDate }}</view>
						</view>
						<view class="coupon-status">已过期</view>
					</view>
				</view>
			</view>
		</view>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				activeTab: 'available', // 当前选中的标签页
				availableCoupons: [
					{
						id: 1,
						title: '满减优惠券',
						description: '全场通用',
						amount: 100,
						condition: 1000,
						validDate: '2024-12-31 前有效',
						status: 'available',
						selected: false
					},
					{
						id: 2,
						title: '新人专享券',
						description: '仅限首次购买',
						amount: 50,
						condition: 500,
						validDate: '2024-12-31 前有效',
						status: 'available',
						selected: false
					}
				],
				unavailableCoupons: [
					{
						id: 3,
						title: '满减优惠券',
						description: '全场通用',
						amount: 50,
						condition: 200,
						validDate: '2024-01-01 至 2024-01-31',
						status: 'expired'
					},
					{
						id: 4,
						title: '新人专享券',
						description: '仅限首次购买',
						amount: 20,
						condition: 100,
						validDate: '2024-01-01 至 2024-01-31',
						status: 'expired'
					}
				],
				selectedCoupon: null // 当前选中的优惠券
			}
		},
		onLoad(options) {
			// 接收已选择的优惠券信息
			if (options.selectedCoupon) {
				try {
					const selectedCoupon = JSON.parse(decodeURIComponent(options.selectedCoupon));
					if (selectedCoupon) {
						// 找到对应的优惠券并设置为已选中
						const couponIndex = this.availableCoupons.findIndex(item => 
							item.id === selectedCoupon.id || 
							(item.amount === selectedCoupon.value && item.condition === selectedCoupon.condition)
						);
						
						if (couponIndex !== -1) {
							// 取消其他优惠券的选中状态
							this.availableCoupons.forEach(item => {
								item.selected = false;
							});
							// 设置当前优惠券为选中状态
							this.availableCoupons[couponIndex].selected = true;
							this.selectedCoupon = this.availableCoupons[couponIndex];
						}
					}
				} catch (error) {
					console.error('解析优惠券数据失败:', error);
				}
			}
		},
		methods: {
			// 返回上一页
			goBack() {
				uni.navigateBack();
			},
			
			// 切换标签页
			switchTab(tab) {
				this.activeTab = tab;
			},
			
			// 选择优惠券
			selectCoupon(coupon) {
				// 取消其他优惠券的选中状态
				this.availableCoupons.forEach(item => {
					item.selected = false;
				});
				
				// 如果点击的是已选中的优惠券，则取消选择
				if (coupon.selected) {
					coupon.selected = false;
					this.selectedCoupon = null;
				} else {
					// 选中当前优惠券
					coupon.selected = true;
					this.selectedCoupon = coupon;
				}
				
				// 将选中的优惠券信息传递回填写订单页面
				uni.$emit('couponSelected', this.selectedCoupon);
				
				// 延迟返回，让用户看到选择效果
				setTimeout(() => {
					uni.navigateBack();
				}, 500);
			}
		}
	}
</script>

<style scoped>
	.coupon-container {
		background-color: #f5f5f5;
		min-height: 100vh;
	}
	
	/* 导航栏 */
	.nav-bar {
		display: flex;
		align-items: center;
		justify-content: space-between;
		height: 88rpx;
		background-color: #fff;
		padding: 0 30rpx;
		border-bottom: 1rpx solid #eee;
	}
	
	.nav-left {
		width: 60rpx;
		height: 60rpx;
		display: flex;
		align-items: center;
		justify-content: center;
	}
	
	.nav-title {
		font-size: 32rpx;
		font-weight: bold;
		color: #333;
	}
	
	.nav-right {
		display: flex;
		align-items: center;
		gap: 20rpx;
	}
	
	.nav-icon {
		font-size: 24rpx;
		color: #666;
	}
	
	/* 标签页 */
	.tab-bar {
		display: flex;
		background-color: #fff;
		border-bottom: 1rpx solid #eee;
	}
	
	.tab-item {
		flex: 1;
		height: 80rpx;
		display: flex;
		align-items: center;
		justify-content: center;
		position: relative;
	}
	
	.tab-text {
		font-size: 28rpx;
		color: #666;
	}
	
	.tab-item.active .tab-text {
		color: #ff6b35;
	}
	
	.tab-item.active::after {
		content: '';
		position: absolute;
		bottom: 0;
		left: 50%;
		transform: translateX(-50%);
		width: 60rpx;
		height: 4rpx;
		background-color: #ff6b35;
		border-radius: 2rpx;
	}
	
	/* 内容区域 */
	.content-area {
		flex: 1;
	}
	
	.tab-content {
		padding: 40rpx;
	}
	
	/* 空状态 */
	.empty-state {
		display: flex;
		flex-direction: column;
		align-items: center;
		justify-content: center;
		padding: 200rpx 0;
	}
	
	.empty-icon {
		font-size: 120rpx;
		color: #ccc;
		margin-bottom: 30rpx;
	}
	
	.empty-text {
		font-size: 32rpx;
		color: #999;
	}
	
	/* 优惠券列表 */
	.coupon-list {
		display: flex;
		flex-direction: column;
		gap: 20rpx;
	}
	
	.coupon-item {
		background-color: #fff;
		border-radius: 12rpx;
		display: flex;
		align-items: stretch;
		position: relative;
		overflow: hidden;
		box-shadow: 0 2rpx 8rpx rgba(0, 0, 0, 0.1);
	}
	
	.coupon-item.disabled {
		opacity: 0.6;
	}
	
	.coupon-left {
		display: flex;
		flex-direction: column;
		align-items: center;
		justify-content: center;
		width: 160rpx;
		background: linear-gradient(135deg, #ff6b35, #ff8c42);
		color: #fff;
		position: relative;
		padding: 20rpx;
	}
	
	.coupon-item.disabled .coupon-left {
		background: linear-gradient(135deg, #ccc, #ddd);
	}
	
	/* 左侧虚线边框效果 */
	.coupon-left::after {
		content: '';
		position: absolute;
		right: 0;
		top: 0;
		bottom: 0;
		width: 20rpx;
		background-image: radial-gradient(circle at 0 50%, transparent 0, transparent 4rpx, #fff 4rpx, #fff 8rpx);
		background-size: 20rpx 16rpx;
		background-repeat: repeat-y;
	}
	
	.coupon-amount {
		display: flex;
		align-items: baseline;
		justify-content: center;
	}
	
	.amount-symbol {
		font-size: 28rpx;
		margin-right: 4rpx;
	}
	
	.amount-value {
		font-size: 48rpx;
		font-weight: bold;
	}
	
	.coupon-condition {
		font-size: 20rpx;
		margin-top: 8rpx;
		text-align: center;
	}
	
	.coupon-right {
		flex: 1;
		padding: 30rpx;
		position: relative;
	}
	
	/* 右侧背景水印 */
	.coupon-right::before {
		content: '券';
		position: absolute;
		right: 20rpx;
		top: 50%;
		transform: translateY(-50%);
		font-size: 120rpx;
		color: rgba(0, 0, 0, 0.05);
		font-weight: bold;
	}
	
	.coupon-title {
		font-size: 28rpx;
		color: #ff4444;
		font-weight: bold;
		margin-bottom: 10rpx;
		position: relative;
		z-index: 1;
	}
	
	.coupon-desc {
		font-size: 24rpx;
		color: #666;
		margin-bottom: 10rpx;
		position: relative;
		z-index: 1;
	}
	
	.coupon-date {
		font-size: 22rpx;
		color: #999;
		position: relative;
		z-index: 1;
	}
	
	.coupon-status {
		position: absolute;
		top: 20rpx;
		right: 20rpx;
		font-size: 20rpx;
		color: #999;
		background-color: #f5f5f5;
		padding: 4rpx 12rpx;
		border-radius: 8rpx;
	}
	
	/* 优惠券选择框 */
	.coupon-checkbox {
		position: absolute;
		top: 20rpx;
		right: 20rpx;
		width: 40rpx;
		height: 40rpx;
		border: 2rpx solid #ddd;
		border-radius: 50%;
		display: flex;
		align-items: center;
		justify-content: center;
		background-color: #fff;
		z-index: 2;
	}
	
	.coupon-checkbox.checked {
		background-color: #ff6b35;
		border-color: #ff6b35;
	}
	
	.check-icon {
		font-size: 24rpx;
		color: #fff;
		font-weight: bold;
	}
</style> 